<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>个人博客-音乐</title>
  <link rel="stylesheet" href="css/music.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
<!--头部-->
<header class="header-wrapper">
  <div class="header-content">
    <div class="middle">
      <div class="info">
        <a href=""><div class="item"><span class="icon icon-tv"></span>主页</div></a>
        <div class="item">画友</div>
        <div class="item">游戏中心</div>
        <div class="item">直播</div>
        <div class="item">周边</div>
        <div class="item">萌战</div>
      </div>


      <div class="user">
        <a style=" color: #222;" href="#"><div class="item">用户</div></a>
        <div class="item">消息</div>
        <div class="item">动态</div>
        <div class="item">收藏夹</div>
        <div class="item">历史</div>
        <div class="item">投稿</div>
        <a style=" color: #222;" href=""><div class="item">退出</div></a>
      </div>

      <div class="user">
        <a href=""><div class="item">登录</div></a>
        <a href=""><div class="item">注册</div></a>
      </div>

    </div>
  </div>
  <div class="header-bg">
    <img class="bg-img" width="100%" src="http://oiq23viaf.bkt.clouddn.com/banner.png">
  </div>
</header>
<!--导航-->
<div class="tab">
  <div class="tab-item">
    <span class="fa fa-home fa-2x"></span>
    <a href="index.html">主页</a>
  </div>
  <div class="tab-item">
    <span class="num">55</span>
    <a href="tea.html">茶会</a>
  </div>
  <div class="tab-item">
    <span class="num">5z</span>
    <a href="book.html">本子</a>
  </div>
  <div class="tab-item">
    <span class="num">55</span>
    <a href="video.html">视频</a>
  </div>
  <div class="tab-item">
    <span class="num">55</span>
    <a href="music.html">音乐</a>
  </div>

  <div class="tab-item">
    <span class="num">55</span>
    <a href="rescource.html">资源</a>
  </div>

  <div class="tab-item">
    <span class="num">55</span>
    <a href="">小组</a>
  </div>
</div>

<div class="content">
  <div class="music-banner">
    <img src="images/forum_header36.jpg" alt="" width="100%">
  </div>


  <div class="music-wrapper">
    <div class="music-category">
      <ul>
        <a href="?tag="><li class="category-item @if($tag == '') active @endif">全部 </li></a>
        <a href="?tag=治愈"><li class="category-item  @if($tag == '治愈') active @endif">治愈 <span >55</span></li></a>
        <a href="?tag=燃向"><li class="category-item  @if($tag == '燃向') active @endif">燃向</li></a>
        <a href="?tag=恋爱"><li class="category-item  @if($tag == '恋爱') active @endif">恋爱</li></a>
        <a href="?tag=悲伤"><li class="category-item  @if($tag == '悲伤') active @endif">悲伤</li></a>
        <a href="?tag=纯音乐"><li class="category-item  @if($tag == '纯音乐') active @endif">纯音乐</li></a>
        <a href="?tag=代码"><li class="category-item  @if($tag == '代码') active @endif">代码</li></a>
      </ul>
    </div>
    <div class="music-box clearfix">
      <ul>


        <li class="box-item">
          <div class="item-image">
            <a href="music_detail.html"><img src="images/8.jpg" alt="" height="100%" width="100%"></a>
            <span>治愈</span>
          </div>
          <p class="title">sadsa</p>
          <p class="by-user">by——xiaohai</p>
          <div class="hr-90"></div>
          <div class="music-info">
            <div class="info-item">
              <span class="fa fa-eye"></span>
             5
            </div>

            <div class="info-item">
              <span class="fa fa-commenting"></span>
              5
            </div>

            <div class="info-image">
              <img src="images/avatar.png" alt="" width="25" height="25">
            </div>
          </div>
        </li>
        <li class="box-item">
          <div class="item-image">
            <a href="music_detail.html"><img src="images/8.jpg" alt="" height="100%" width="100%"></a>
            <span>治愈</span>
          </div>
          <p class="title">sadsa</p>
          <p class="by-user">by——xiaohai</p>
          <div class="hr-90"></div>
          <div class="music-info">
            <div class="info-item">
              <span class="fa fa-eye"></span>
              5
            </div>

            <div class="info-item">
              <span class="fa fa-commenting"></span>
              5
            </div>

            <div class="info-image">
              <img src="images/avatar.png" alt="" width="25" height="25">
            </div>
          </div>
        </li>
        <li class="box-item">
          <div class="item-image">
            <a href="music_detail.html"><img src="images/8.jpg" alt="" height="100%" width="100%"></a>
            <span>治愈</span>
          </div>
          <p class="title">sadsa</p>
          <p class="by-user">by——xiaohai</p>
          <div class="hr-90"></div>
          <div class="music-info">
            <div class="info-item">
              <span class="fa fa-eye"></span>
              5
            </div>

            <div class="info-item">
              <span class="fa fa-commenting"></span>
              5
            </div>

            <div class="info-image">
              <img src="images/avatar.png" alt="" width="25" height="25">
            </div>
          </div>
        </li>
        <li class="box-item">
          <div class="item-image">
            <a href="music_detail.html"><img src="images/8.jpg" alt="" height="100%" width="100%"></a>
            <span>治愈</span>
          </div>
          <p class="title">sadsa</p>
          <p class="by-user">by——xiaohai</p>
          <div class="hr-90"></div>
          <div class="music-info">
            <div class="info-item">
              <span class="fa fa-eye"></span>
              5
            </div>

            <div class="info-item">
              <span class="fa fa-commenting"></span>
              5
            </div>

            <div class="info-image">
              <img src="images/avatar.png" alt="" width="25" height="25">
            </div>
          </div>
        </li>
        <li class="box-item">
          <div class="item-image">
            <a href="music_detail.html"><img src="images/8.jpg" alt="" height="100%" width="100%"></a>
            <span>治愈</span>
          </div>
          <p class="title">sadsa</p>
          <p class="by-user">by——xiaohai</p>
          <div class="hr-90"></div>
          <div class="music-info">
            <div class="info-item">
              <span class="fa fa-eye"></span>
              5
            </div>

            <div class="info-item">
              <span class="fa fa-commenting"></span>
              5
            </div>

            <div class="info-image">
              <img src="images/avatar.png" alt="" width="25" height="25">
            </div>
          </div>
        </li>
        <li class="box-item">
          <div class="item-image">
            <a href="music_detail.html"><img src="images/8.jpg" alt="" height="100%" width="100%"></a>
            <span>治愈</span>
          </div>
          <p class="title">sadsa</p>
          <p class="by-user">by——xiaohai</p>
          <div class="hr-90"></div>
          <div class="music-info">
            <div class="info-item">
              <span class="fa fa-eye"></span>
              5
            </div>

            <div class="info-item">
              <span class="fa fa-commenting"></span>
              5
            </div>

            <div class="info-image">
              <img src="images/avatar.png" alt="" width="25" height="25">
            </div>
          </div>
        </li>
        <li class="box-item">
          <div class="item-image">
            <a href="music_detail.html"><img src="images/8.jpg" alt="" height="100%" width="100%"></a>
            <span>治愈</span>
          </div>
          <p class="title">sadsa</p>
          <p class="by-user">by——xiaohai</p>
          <div class="hr-90"></div>
          <div class="music-info">
            <div class="info-item">
              <span class="fa fa-eye"></span>
              5
            </div>

            <div class="info-item">
              <span class="fa fa-commenting"></span>
              5
            </div>

            <div class="info-image">
              <img src="images/avatar.png" alt="" width="25" height="25">
            </div>
          </div>
        </li>
        <li class="box-item">
          <div class="item-image">
            <a href="music_detail.html"><img src="images/8.jpg" alt="" height="100%" width="100%"></a>
            <span>治愈</span>
          </div>
          <p class="title">sadsa</p>
          <p class="by-user">by——xiaohai</p>
          <div class="hr-90"></div>
          <div class="music-info">
            <div class="info-item">
              <span class="fa fa-eye"></span>
              5
            </div>

            <div class="info-item">
              <span class="fa fa-commenting"></span>
              5
            </div>

            <div class="info-image">
              <img src="images/avatar.png" alt="" width="25" height="25">
            </div>
          </div>
        </li>
        <li class="box-item">
          <div class="item-image">
            <a href="music_detail.html"><img src="images/8.jpg" alt="" height="100%" width="100%"></a>
            <span>治愈</span>
          </div>
          <p class="title">sadsa</p>
          <p class="by-user">by——xiaohai</p>
          <div class="hr-90"></div>
          <div class="music-info">
            <div class="info-item">
              <span class="fa fa-eye"></span>
              5
            </div>

            <div class="info-item">
              <span class="fa fa-commenting"></span>
              5
            </div>

            <div class="info-image">
              <img src="images/avatar.png" alt="" width="25" height="25">
            </div>
          </div>
        </li>
        <li class="box-item">
          <div class="item-image">
            <a href="music_detail.html"><img src="images/8.jpg" alt="" height="100%" width="100%"></a>
            <span>治愈</span>
          </div>
          <p class="title">sadsa</p>
          <p class="by-user">by——xiaohai</p>
          <div class="hr-90"></div>
          <div class="music-info">
            <div class="info-item">
              <span class="fa fa-eye"></span>
              5
            </div>

            <div class="info-item">
              <span class="fa fa-commenting"></span>
              5
            </div>

            <div class="info-image">
              <img src="images/avatar.png" alt="" width="25" height="25">
            </div>
          </div>
        </li>
        <li class="box-item">
          <div class="item-image">
            <a href="music_detail.html"><img src="images/8.jpg" alt="" height="100%" width="100%"></a>
            <span>治愈</span>
          </div>
          <p class="title">sadsa</p>
          <p class="by-user">by——xiaohai</p>
          <div class="hr-90"></div>
          <div class="music-info">
            <div class="info-item">
              <span class="fa fa-eye"></span>
              5
            </div>

            <div class="info-item">
              <span class="fa fa-commenting"></span>
              5
            </div>

            <div class="info-image">
              <img src="images/avatar.png" alt="" width="25" height="25">
            </div>
          </div>
        </li>
        <li class="box-item">
          <div class="item-image">
            <a href="music_detail.html"><img src="images/8.jpg" alt="" height="100%" width="100%"></a>
            <span>治愈</span>
          </div>
          <p class="title">sadsa</p>
          <p class="by-user">by——xiaohai</p>
          <div class="hr-90"></div>
          <div class="music-info">
            <div class="info-item">
              <span class="fa fa-eye"></span>
              5
            </div>

            <div class="info-item">
              <span class="fa fa-commenting"></span>
              5
            </div>

            <div class="info-image">
              <img src="images/avatar.png" alt="" width="25" height="25">
            </div>
          </div>
        </li>
        <li class="box-item">
          <div class="item-image">
            <a href="music_detail.html"><img src="images/8.jpg" alt="" height="100%" width="100%"></a>
            <span>治愈</span>
          </div>
          <p class="title">sadsa</p>
          <p class="by-user">by——xiaohai</p>
          <div class="hr-90"></div>
          <div class="music-info">
            <div class="info-item">
              <span class="fa fa-eye"></span>
              5
            </div>

            <div class="info-item">
              <span class="fa fa-commenting"></span>
              5
            </div>

            <div class="info-image">
              <img src="images/avatar.png" alt="" width="25" height="25">
            </div>
          </div>
        </li>



      </ul>
    </div>




  </div>
</div>

</body>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
</html>